<!DOCTYPE html>
<html>
	<head>
		<title>功能-添加/修改/明细</title>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<meta name="viewport"
			content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<!-- 所有的 css & js 资源 -->
		<link rel="stylesheet" href="../../static/kj/element-ui/theme-chalk/index.css">
		<link rel="stylesheet" href="../../static/sa.css">
		
		<script src="../../static/kj/vue.min.js"></script>
		<script src="../../static/kj/axios.min.js"></script>
		<script src="../../static/kj/element-ui/index.js"></script>
		<script src="../../static/kj/jquery.min.js"></script>
		<script src="../../static/kj/layer/layer.js"></script>

		<script src="../../static/sa.js"></script>
		<script src="../../sa-resources/config.js"></script>
	</head>
	<body>
		<div class="vue-box sbot" style="display: none;" :style="'display: block;'">
			<!-- ------- 内容部分 ------- -->
			<div class="s-body">
				<div class="c-panel">
					<div class="c-title">数据添加</div>

					<el-form v-if="m" :rules="rules" ref="data-table" label-width="100px" :model="m"
						:disabled="show == 1">
						<el-form-item label="名称" prop="name">
							<el-input v-model="m.name"></el-input>
						</el-form-item>

						<el-form-item label="上级菜单" prop="parentId">
							<el-select v-model="m.parentId" placeholder="请选择" :clearable="true" no-data-text="加载中">
								<el-option label="一级菜单" :value="0">
									<span style="float: left">一级菜单</span>
									<span style="float: right; color: #8492a6; font-size: 13px"> </span>
								</el-option>

								<el-option v-for="(item, index) in menus" :key="index" :label="item.name"
									:value="item.id">
									<span style="float: left">{{ item.name }}</span>
									<span style="float: right; color: #8492a6; font-size: 13px">
										{{ item.identity }}
									</span>
								</el-option>
							</el-select>
						</el-form-item>

						<el-form-item label="分类图标" prop="icon">
							<el-input v-model="m.icon"></el-input>
						</el-form-item>

						<el-form-item label="权限名" prop="identity">
							<el-input v-model="m.identity"></el-input>
						</el-form-item>

						<el-form-item label="访问路径" prop="url">
							<el-input v-model="m.url"></el-input>
						</el-form-item>
						
						<el-form-item label="自定义事件" prop="clickFun">
							<el-input v-model="m.clickFun" type='textarea'></el-input>
						</el-form-item>

						<el-form-item label="排序索引" prop="cfgSort">
							<el-input v-model="m.cfgSort" type="number"></el-input>
						</el-form-item>

						<el-form-item label="状态" prop="status">
							<el-switch v-model="m.status" :active-value="1" :inactive-value="0"
								inactive-color="#ff4949"></el-switch>
						</el-form-item>

						<el-form-item label="备注" prop="remark">
							<el-input v-model="m.remark" type="textarea"></el-input>
						</el-form-item>
					</el-form>
				</div>
			</div>

			<!-- ------- 底部按钮 ------- -->
			<div class="s-foot">
				<el-button type="primary" @click="ok()">确定</el-button>
				<el-button @click="sa.closeCurrIframe()">取消</el-button>
			</div>
		</div>

		<script src="../../sa-resources/api.js"></script>
		<script src="../../sa-resources/wuyan.js"></script>
		<script src="../../sa-resources/element-ui-helper.js"></script>

		<script>
			var app = new Vue({
				el: '.vue-box',
				data: {
					id: parseInt(sa.p('id', -1)),
					show: parseInt(sa.p('show', -1)),
					parentId: parseInt(sa.p('parentId', -1)),
					parentName: sa.p('parentName', ''),
					menus: [],
					m: null, // 实体对象 
					rules: {
						name: [{
							required: true,
							message: '请输入菜单名称',
						}],
						identity: [{
							required: true,
							message: '请输入权限名称',
						}, ],
					}
				},
				mounted: function() {
					axiosConfig(axios)
					this.init()
				},
				methods: {
					init() {
						this.m = this.createModel();

						if (this.id > 0) {
							let loading = elLoadding({
								that: this
							})

							let url = getUrl('pub-function', 'getOne', [this.id])
							let http = getHttp(axios, 'pub-function', 'getOne')
							http(url, {}).then(res => {
									this.m = res
									loading.close();
								})
								.catch((err) => { // 请求失败处理
									sa.error(err.msg);
									loading.close();
								});
						}

						// 一级菜单
						if (this.parentId > 0) {
							this.menus.push({
								id: this.parentId,
								name: this.parentName,
								identity: '',
							})

							this.m.parentId = this.parentId
						} else {
							if(!this.id){
								let url = getUrl('pub-function', 'list')
								let http = getHttp(axios, 'pub-function', 'list')
								let queryParams = [{
									left: 'parentId',
									op: 'eq',
									right: [0]
								}]
								if (this.id > 0) {
									queryParams.push({
										left: 'id',
										op: 'ne',
										right: [this.id]
									})
								}
								
								http(url, {
										params: {
											isPage: false,
											params: JSON.stringify(queryParams)
										}
									}).then(res => {
										if (res.list) this.menus = res.list
									})
									.catch((err) => {});
							}
						}
					},

					// 创建一个 默认Model 
					createModel: function() {
						return {
							name: '', // 分类名字  
							icon: '', // 分类图标  
							parentId: '',
							cfgSort: 0, // 排序值  
							identity: '', // 权限名  
							url: '', // 访问路径  
							clickFun: '', // 自定义事件
							status: 1, // 状态  
							remark: '', // 备注  
						}
					},

					// 提交数据 
					ok: function() {
						if (this.show == 1) {
							sa.closeCurrIframe();
							return
						}

						this.$refs['data-table'].validate((valid) => {
							if (valid) {
								let loading = elLoadding({
									that: this
								})
								let params = fmtAToB(this.createModel(), this.m)

								let url = getUrl('pub-function', this.id <= 0 ? 'add' : 'edit', this.id <=
									0 ? undefined : [this.id])
								let http = getHttp(axios, 'pub-function', this.id <= 0 ? 'add' : 'edit')
								http(url, params).then(res => {
										this.m = res
										loading.close()

										this.clean()
									})
									.catch((err) => {
										sa.error(err.msg)
										loading.close()
									});
							} else {
								sa.error('参数校验失败');
								return false;
							}
						});
					},

					// 添加/修改 完成后的动作
					clean: function() {
						parent.app.f5(); // 刷新父页面列表
						sa.closeCurrIframe(); // 关闭本页
					}
				}
			})
		</script>
	</body>
</html>
